<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>Hoy en la Javeriana</title>

<!-- meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=2" /-->
	
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">	

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

<link href="css/list_new.css" rel="stylesheet" type="text/css">

<script>
    
    var usuario='';
    var imagenlike='img/like1.png';
    
    function leerGET(){ 
    
  	var cadGET = location.search.substr(1,location.search.length); 
  	
  	
  	var arrGET = cadGET.split("&"); 
  	var asocGET = new Array(); 
  	var variable = ""; 
  	var valor = ""; 
  	
  	for(i=0;i<arrGET.length;i++){ 
    	var aux = arrGET[i].split("="); 
    	variable = aux[0]; 
    	if(variable=='usuario'){
    		usuario=aux[1];
    		
    	}
	  } 
	} 
	


	$(function() {
	    leerGET();
	    //alert('usurio> '+usuario);
		$('#container').masonry({
			itemSelector : '.item',
			columnWidth : 240,
      		//isAnimated: !Modernizr.csstransitions,///
      		isRTL: false,
      		isResizable: true
		});

		//$('#container').css("width: 5000;");
	});
	
	

	$.ajax({
		url : '#',
		success : function(result) {

			jQuery.ajaxSetup({
				scriptCharset : "utf-8",
				contentType : "application/json; charset=utf-8"
			});
			
			$("<div/>").addClass('item bigbox').css("background","url(img/sn_fra.jpg)").html(
										"<div class='logo_general' /><div class='contenido_int contenido_int2'></div>")
										.appendTo("#container");

			//$("<div/>").addClass('item separator').html("<span>	  </span>").appendTo("#container");

			$.getJSON("http://localhost:8080/newspuj/extractnews?usuario="+usuario,
					function(data) {
					    var cont=0;
						$.each(data, function(i, item) {
						
						    //var liketmp="<div class='buttonlike'><img  id='likebutton"+item.id+"' src='img/like1.png'></img><div class='idnews'>"+item.id+"</div></div> ";
						    
						    var startmp="<div class='star'><img  id='star' src='img/star.png'></img></div> ";
						    
						    if(item.isTop =='true'){
						    	startmp="<div class='star'><img  id='star' src='img/star.png'></img></div> <div class='buttonlike'><img  id='likebutton"+item.id+"' src='img/like1.png'></img><div class='idnews'>"+item.id+"</div></div> ";
						    }
						    else{
						    	startmp="<div class='buttonlike'><img  id='likebutton"+item.id+"' src='img/like1.png'></img><div class='idnews'>"+item.id+"</div></div> ";
						    }
						    
							cont++;
							if (item.imagen != "") {
								
								if(Math.random()>.5){
								$("<div/>").addClass('item col1').css("background",
										"url(" + item.imagen + ")").html(startmp+"<div class='contenido_int'><h1 class='titulo'><a class='titulo linknews' href='detalle.html?usuario="+usuario+"&idnota="+item.id+"'>"
												+ item.titulo + "</a></h1></div>")
										.appendTo("#container");
										
										
								}
								else{$("<div/>").addClass('item').css("background",
										"url(" + item.imagen + ")").html(
												startmp+"<div class='contenido_int contenido_int1'><div class='idnews'>"+item.id+"</div><h1 class='titulo'><a class='titulo linknews' href='detalle.html?usuario="+usuario+"&idnota="+item.id+"'>"
														+ item.titulo + "</a></h1></div>")
												.appendTo("#container");}
							} else {
								
								var colorcss="color"+Math.floor((Math.abs(((Math.random())*50))/10)+1);
							    //.css("background","url(img/tiara1.jpg)")
							    //alert(colorcss);
								$("<div/>").addClass('item '+colorcss).html(
										startmp+"<div class='transtiara'><div class='contenido_int  contenido_int1'><div class='idnews'>"+item.id+"</div><h1 class='titulo'><a class='titulo linknews' href='detalle.html?usuario="+usuario+"&idnota="+item.id+"'>"
												+ item.titulo + "</a></h1></div></div>")
										.appendTo("#container");
							}
							
							
							
							$("#likebutton"+item.id).on("click", function(event){
  												//alert($(this).next().text());
  												
  												//alert('http://localhost:8080/newspuj/likeuser?idusuario='+usuario+'&like='+$(this).attr("src")+'&idnoticia='+$(this).next().text());
  												
  												//alert('0: '+imagenlike);
  												$.getJSON(
															'http://localhost:8080/newspuj/likeuser?idusuario='+usuario+'&like='+$(this).attr("src")+'&idnoticia='+$(this).next().text(),
															function(data) {
															
																imagenlike=data.mensaje;
																
															});
															
												//alert('1: '+imagenlike);			
  												$(this).attr("src", imagenlike);
  												//$(this).next().text() // retorna id de la noticia
										});


							/*if (cont == 10){
							    
								$("<div/>").addClass('item separator').html(
										"<span>separador >> &nbsp; </span>")
										.appendTo("#container");
								cont=0;		
								}*/	
							
						});
					});

		} // edited
	});
	
	$("#likebutton").on("click", function(event){
  		alert($(this).text());
	});
	
	/*$(document).ready(function(){
	//#likebutton, 
   		$("a").bind("click", function(event){
     		alert("Este mensaje se muestra cuando el usuario pincha en el enlace");
     		event.preventDefault();
   		});
   });*/
</script>

</head>

<body>

	<!-- section id="superior">
		<div id="encabezado">
			<img src="img/LG_INC_BOLH_3.svg" width="200px" />
		</div>
		<div id="botonAll">
			<a href="#"> <img src="img/BTN_TODOS.svg" width="164px" /></a>
		</div>
	</section-->

	<!-- section id="contenido">
	
	<ul id="categoria">
    <li><a href="#"> <img src="imgNewL/lis_nw1.jpg" width="auto"/></a></li>
    <li><a href="#"> <img src="imgNewL/lis_nw2.jpg" width="auto"/></a></li>
    <li><a href="#"> <img src="imgNewL/lis_nw3.jpg" width="auto"/></a></li>
    <li><a href="#"> <img src="imgNewL/lis_nw4.jpg" width="auto"/></a></li>
    <li><a href="#"> <img src="imgNewL/lis_nw5.jpg" width="auto"/></a></li>
    <li><a href="#"> <img src="imgNewL/lis_nw6.jpg" width="auto"/></a></li>

    </ul>
    
</section-->

	<!--section id="contenido">

		<!-- ul id="categoria"-->
			<!--  li-->
				<div id="container"></div>
			<!-- /li-->

		<!-- /ul>

	</section-->

	<footer> </footer>


</body>
</html>
